<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">个人中心</block>
		</cu-custom>
		<scroll-view>
			<view class="cell-view" @click="goFigurePicture">
				<view class="cell-conten-view">
					<image class="cell-img" :src="header" mode="aspectFill"></image>
					<view class="cell-img-text-view">
						<text>{{userInfo.name}}</text>
						<text class="cell-img-sub-text">{{userInfo.schoolName}}</text>
					</view>
					<uni-icons type="arrowright" color="#B2B2B2" size="15" />
				</view>
			</view>
			<view class="cell-view">
				<!-- <view class="cell-conten-view">
					<text class="cell-title">人像照片</text>
					<text class="cell-content">未设置</text>
					<uni-icons type="arrowright" color="#B2B2B2" size="15" />
				</view> -->
				<view class="cell-conten-view">
					<text class="cell-title">电话</text>
					<text class="cell-content">{{userInfo.telephone != null ? userInfo.telephone : "未设置"}}</text>
					<!-- <uni-icons type="arrowright" color="#B2B2B2" size="15" /> -->
				</view>
				<!-- <view class="cell-conten-view">
					<text class="cell-title">性别</text>
					<text class="cell-content">{{sex != null ? sex :  "未设置"}}</text>
					<uni-icons type="arrowright" color="#B2B2B2" size="15" />
				</view> -->
				<!-- <view class="cell-conten-view">
					<text class="cell-title">职位</text>
					<text class="cell-content">{{sex != null ? sex :  "未设置"}}</text>
					<uni-icons type="arrowright" color="#B2B2B2" size="15" />
				</view> -->
			</view>
			<view class="cell-view" @click="toggle()">
				<view class="cell-conten-view">
					<text class="cell-title">密码修改</text>
					<uni-icons type="arrowright" color="#B2B2B2" size="15" />
				</view>
			</view>
			<button form-type="submit" style="margin:25px 10px;" type="primary" @click="toLogout" :loading="loading" :disabled="loading">退出登录</button>
			<uni-popup id="popup" ref="popup" type="center" :animation="false" @change="change">
				<view class="popup-content">
					<view>
						popup 内容，此示例没有动画效果
					</view>
					<view>
						popup 内容，此示例没有动画效果
					</view>
				</view>
			</uni-popup>
		</scroll-view>
	</view>
</template>

<script>
	import Vue from 'vue'
	import {  
		mapState,
	    mapActions  
	} from 'vuex';
	import api from '@/common/js/api.js'; 
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue'
	export default {
		components: {
			uniPopupMessage,
			uniPopupDialog,
			uniPopupShare
		},
		created() {
			console.log('created')
		},
		onLoad: function(options) {
			// let user = Vue.prototype.$store.userInfo
			// console.log(user)
			// this.name = user.name
			// this.telephone = user.telephone
			// this.userInfo = this.state.userInfo
			// this.header = this.userInfo.photo ?? "../../../../../static/logo.png"
			// if(this.userInfo.photo != null){
			// 	this.header = api.baseUrl + this.userInfo.photo
			// }
			
		},
		onShow: function(options)  {
			this.userInfo = this.state.userInfo
			this.header = this.userInfo.photo ?? "../../../../../static/logo.png"
			if(this.userInfo.photo != null){
				this.header = api.baseUrl + this.userInfo.photo
			}
		},
		data() {
			return {
				header: "",
				userInfo: {},
				mapStyle: 'background:rgba(255,97,44,1);color:rgba(255,255,255,1);',
				normalStyle: '',
				choseValue: '',
				currStyle: '',
				name: '',
				telephone: '',
				sex: '',
				loading: false,
			}
		},
		computed: {
			...mapState('teacher', {
				state: state => state
			}),
		},
		methods: {
			...mapActions('teacher', [
			  'logout'
			]),
			/**
			 * 打开基础内容
			 */
			toggle() {
				this.$refs.popup.open()
			},
			/**
			 * popup 状态发生变化触发
			 * @param {Object} e
			 */
			change(e) {
				console.log('popup ' + e.type + ' 状态', e.show)
			},
			//退出登录
			toLogout(){
				uni.showModal({
				    content: '确定要退出登录么',
				    success: (e)=>{
				    	if(e.confirm){
							let wechatId = this.userInfo.wechatId
							let teacherId = this.userInfo.id
							this.loading = true;
							this.$api.logout("?teacherId="+teacherId).then((res) => {
								this.loading = false;
								if (res.code == 200) { //成功
									console.log('request success', res)
									this.res = '请求结果 : ' + JSON.stringify(res);
									uni.reLaunch({
										url: '../../../login/login?openId=' + wechatId
									})
									this["logout"]()
							
								} else {
									// alert("getMenu code：" + res.msg)
									console.log("logout code：" + res.msg)
								}
							
							
							}).catch((err) => {
								console.log('request fail', err);
							})
				    		
				    	}
				    }
				});
			},
			touchstart(e) {
				let value = e.currentTarget.dataset.index
				this.choseValue = value;
				this.currStyle = 'background:rgba(255,97,44,1);'
				console.log(e)

			},
			touchend(e) {
				// this.currStyle = 'background:rgba(255,255,255,1);'
				let value = e.currentTarget.dataset.index
				this.choseValue = '';
				console.log(e)
			},
			goFigurePicture() {
				console.log('goFigurePicture')
				uni.navigateTo({
					url: "figure_picture",
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #F1F1F1;
	}
	
	.uni-collapse-cell--disabled {
			background-color: #f1f1f1;
			/* opacity: 0.3;
	*/
		}
	
	.cell-view {
		flex: 1;
		margin-top: 15px;
		/* padding: 0px 15px; */
		padding-right: 0px;
		background-color: #fff;
		border-top: 0.5px solid #D9D9D9;
		border-bottom: 0.5px solid #D9D9D9;
	}

	.cell-conten-view {
		padding-left: 15px;
		padding-right: 15px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		/* padding-right: 10px; */
		border-bottom: 0.5px solid #D9D9D9;
	}

	.cell-conten-view:active {
		background-color: #f1f1f1;
	}
	
	.cell-title {
		display: flex;
		flex: 1;
		margin: 8px 0px;
		font-size: 16px;
		color: #444444;
	}
	.cell-content {
		display: flex;
		margin: 8px 5px;
		font-size: 16px;
		color: #999999;
	}
	.cell-img {
		margin: 10px 0px;
		width: 50px;
		height: 50px;
		border-radius: 5px;
	}

	.cell-img-text-view {
		flex: 1;
		display: flex;
		margin-left: 10px;
		flex-direction: column;
		justify-content: center;
		font-size: 16px;
		color: #444444;
		line-height: 20px;
	}
	.cell-img-sub-text {
		margin-top: 8px;
		font-size: 14px;
		color: #999999;
		line-height: 15px;
	}
	.popup-content {
		background-color: #fff;
		padding: 15px;
	}
</style>
